import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter/services.dart'; // Added for SystemChrome
import 'dart:io'; // 导入Platform判断
import 'package:playtruly/common/values/images.dart'; // 导入图片资源
import 'package:playtruly/common/routers/names.dart'; // 导入路由名称

import 'controller.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  // 获取控制器
  final MainController controller = Get.find<MainController>();
  
  // 控制发布选项弹出层的显示状态
  final RxBool _showPublishOptions = false.obs;
  
  // 定义红色颜色常量
  final Color redColor = const Color(0xFFE33641);
  
  // 显示发布选项
  void _togglePublishOptions() {
    _showPublishOptions.value = !_showPublishOptions.value;
    
    // 🔍 调试信息：打印iOS适配信息（方便测试时查看）
    if (_showPublishOptions.value) {
      final bottomPadding = MediaQuery.of(context).padding.bottom;
      final totalBottomSpace = Platform.isIOS ? bottomPadding + 100 : bottomPadding + 80;
      debugPrint('🔍 发布弹出层iOS适配调试信息:');
      debugPrint('   平台: ${Platform.isIOS ? "iOS" : "Android"}');
      debugPrint('   底部安全区域: ${bottomPadding}px');
      debugPrint('   总底部间距: ${totalBottomSpace}px');
    }
  }
  
  // 关闭发布选项
  void _hidePublishOptions() {
    _showPublishOptions.value = false;
  }
  
  // 切换标签，同时关闭发布选项弹出层
  void _switchTab(int index) {
    _hidePublishOptions(); // 关闭发布选项
    controller.switchTab(index); // 切换标签页
  }
  
  @override
  Widget build(BuildContext context) {
    super.build(context);

    // 设置系统UI样式，使状态栏透明，图标变亮
    // SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    //   statusBarColor: Colors.transparent,
    //   statusBarIconBrightness: Brightness.light,
    // ));
    
    // 计算屏幕宽度的5%作为左右间距
    final double sidePadding = MediaQuery.of(context).size.width * 0.05;
    
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      // 问题可能在这里：SafeArea可能阻止了子页面内容延伸到状态栏
      // 解决方案：移除SafeArea，直接使用Stack
      body: Stack(
        children: [
          // 主内容
          Obx(() => IndexedStack(
            index: controller.state.selectedIndex.value,
            children: controller.pages,
          )),
          
          // 发布选项弹出层
          Obx(() => _showPublishOptions.value 
            ? GestureDetector(
                onTap: _togglePublishOptions, // 点击蒙版关闭
                child: Container(
                  color: Colors.black.withOpacity(0.5), // 半透明灰色蒙版
                  width: double.infinity,
                  height: double.infinity,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        // 🔥 iOS适配：动态计算底部安全区域，确保发布选项不被遮挡
                        padding: EdgeInsets.only(
                          bottom: Platform.isIOS 
                            ? MediaQuery.of(context).padding.bottom + 100 // iOS需要更多间距
                            : MediaQuery.of(context).padding.bottom + 80,  // Android使用原始间距
                        ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          // 发布评论按钮
                          GestureDetector(
                            onTap: () {
                              _hidePublishOptions(); // 关闭弹出层
                              // 导航到发布评论页面
                              Get.toNamed(RouteNames.postPostComment);
                            },
                            child: Container(
                              width: 150,
                              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(25),
                                border: Border.all(color: redColor, width: 1.5),
                                // 🍎 iOS优化：增加阴影效果，提升视觉层次
                                boxShadow: Platform.isIOS ? [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1),
                                    blurRadius: 8,
                                    offset: const Offset(0, 2),
                                  ),
                                ] : null,
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(
                                    'assets/ai-html/img/评论.png', 
                                    width: 18,
                                    height: 18
                                  ),
                                  const SizedBox(width: 5),
                                  Text(
                                    "发布评论", 
                                    style: TextStyle(fontSize: 14, color: redColor),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          
                          const SizedBox(height: 16), // 增加按钮间距
                          
                          // 发布活动按钮
                          GestureDetector(
                            onTap: () {
                              _hidePublishOptions(); // 关闭弹出层
                              // 导航到发布活动页面
                              Get.toNamed(RouteNames.postPostEvent);
                            },
                            child: Container(
                              width: 150,
                              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(25),
                                border: Border.all(color: redColor, width: 1.5),
                                // 🍎 iOS优化：增加阴影效果，提升视觉层次
                                boxShadow: Platform.isIOS ? [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1),
                                    blurRadius: 8,
                                    offset: const Offset(0, 2),
                                  ),
                                ] : null,
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(
                                    'assets/ai-html/img/活动.png', 
                                    width: 18,
                                    height: 18
                                  ),
                                  const SizedBox(width: 5),
                                  Text(
                                    "发布活动", 
                                    style: TextStyle(fontSize: 14, color: redColor),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            : const SizedBox.shrink(),
          ),
        ],
      ),
      // 使用自定义底部导航栏
      bottomNavigationBar: Stack(
        alignment: Alignment.bottomCenter,
        clipBehavior: Clip.none, // 允许子元素超出边界
        children: [
          // 底部导航栏
          Container(
            decoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                  color: Colors.black, // 黑色边框
                  width: 0.5, // 细线宽度
                ),
              ),
            ),
            child: Theme(
              data: ThemeData(
                splashColor: Colors.transparent, // 移除水波纹效果
                highlightColor: Colors.transparent, // 移除点击高亮效果
              ),
              child: Container(
                color: Colors.white,
                // 🔥 正确处理底部安全区域，确保文字不被遮挡
                padding: EdgeInsets.only(
                  top: 10,
                  bottom: MediaQuery.of(context).padding.bottom + 10, // 添加底部安全区域高度
                  left: 0,
                  right: 0,
                ),
                child: Padding(
                  // 恢复正常的左右间距
                  padding: EdgeInsets.only(left: sidePadding, right: sidePadding),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 导航按钮
                      _buildNavItem(0, '首页'),
                      _buildNavItem(1, '一起玩'),
                      _buildNavItem(2, '发布', isPublishButton: true),
                      _buildNavItem(3, '我的'),
                    ],
                  ),
                ),
              ),
            ),
          ),
          
          // AI浮动按钮 - 已隐藏
          // Positioned(
          //   right: 8, // 右侧位置
          //   bottom: MediaQuery.of(context).padding.bottom + 12, // 🔥 根据底部安全区域调整位置
          //   child: GestureDetector(
          //     onTap: () => _switchTab(4), // 点击切换到AI页面
          //     onLongPressStart: (_) => controller.startVoiceRecording(), // 🎤 长按开始录音
          //     onLongPressEnd: (_) => controller.stopVoiceRecording(), // 🎤 松手停止录音
          //     child: Obx(() {
          //       final isSelected = controller.state.selectedIndex.value == 4;
          //       final isRecording = controller.isVoiceRecording.value;
          //       
          //       // 录音时显示不同的视觉效果
          //       return AnimatedContainer(
          //         duration: const Duration(milliseconds: 200),
          //         transform: Matrix4.identity()..scale(isRecording ? 1.1 : 1.0),
          //         child: Stack(
          //           alignment: Alignment.center,
          //           children: [
          //             // 录音时的波纹效果
          //             if (isRecording)
          //               Container(
          //                 width: 95,
          //                 height: 95,
          //                 decoration: BoxDecoration(
          //                   shape: BoxShape.circle,
          //                   color: Colors.red.withOpacity(0.3),
          //                 ),
          //               ),
          //             // AI按钮图片
          //             Image.asset(
          //               isSelected ? AssetsImages.selectAiYesPng : AssetsImages.selectAiNoPng,
          //               width: 85,
          //               height: 85,
          //             ),
          //             // 录音状态指示器
          //             if (isRecording)
          //               Positioned(
          //                 top: 0,
          //                 right: 0,
          //                 child: Container(
          //                   width: 20,
          //                   height: 20,
          //                   decoration: const BoxDecoration(
          //                     shape: BoxShape.circle,
          //                     color: Colors.red,
          //                   ),
          //                   child: const Icon(
          //                     Icons.mic,
          //                     color: Colors.white,
          //                     size: 12,
          //                   ),
          //                 ),
          //               ),
          //           ],
          //         ),
          //       );
          //     }),
          //   ),
          // ),
        ],
      ),
    );
  }
  
  // 构建导航项
  Widget _buildNavItem(int index, String label, {bool isPublishButton = false}) {
    return Obx(() {
      final isSelected = controller.state.selectedIndex.value == index;
      return InkWell(
        onTap: () {
          if (isPublishButton) {
            _togglePublishOptions(); // 显示发布选项弹出层
          } else {
            _switchTab(index); // 使用修改后的切换方法
          }
        },
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), // 🔥 增加垂直内边距
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 根据索引和选中状态使用不同的图标
              Image.asset(
                _getImagePath(index, isSelected),
                width: 28, // 🔥 稍微减小图标尺寸，为文字留出更多空间
                height: 28, // 🔥 稍微减小图标尺寸，为文字留出更多空间
              ),
              const SizedBox(height: 4), // 🔥 增加图标和文字间的间距
              Text(
                label,
                style: TextStyle(
                  fontSize: 11, // 🔥 稍微增大文字尺寸，提高可读性
                  color: isSelected ? Theme.of(context).primaryColor : Colors.grey,
                  fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal, // 🔥 选中时文字加粗
                ),
                textAlign: TextAlign.center, // 🔥 确保文字居中
              ),
            ],
          ),
        ),
      );
    });
  }
  
  // 获取对应的图标路径
  String _getImagePath(int index, bool isSelected) {
    switch (index) {
      case 0: // 首页
        return isSelected ? AssetsImages.selectHomepageYesPng : AssetsImages.selectHomepageNoPng;
      case 1: // 一起玩
        return isSelected ? AssetsImages.selectPlayYesPng : AssetsImages.selectPlayNoPng;
      case 2: // 发布
        return isSelected ? AssetsImages.selectPublishYesPng : AssetsImages.selectPublishNoPng;
      case 3: // 我的
        return isSelected ? AssetsImages.selectMineYesPng : AssetsImages.selectMineNoPng;
      default:
        return AssetsImages.selectHomepageNoPng;
    }
  }
}
